<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  
  <style type="text/css">
  body{
     background: url("./img/3.png") center center/cover no-repeat;//水平垂直覆盖重复平铺
  }
  .container {
  width: 800px;
  height: 800px;
  margin: auto auto;
  position: relative;
  /* background-color: black;
  /* 将背景颜色设置为黑色 */
}

.glass {
  position: absolute;
  width: 360px;
  height: 480px;
  top: 160px;
  left: 220px;
  border-radius: 20px;
  color: #76e0f6;
  background-color: rgba(255, 255, 255, 0.05);

  backdrop-filter: blur(4px);
  box-shadow: inset 1px 1px 6px rgba(255, 255, 255, 0.3), 2px 2px 15px rgba(0, 0, 0, 0.5);
}

.bg {
  position: absolute;
  width: 800px;
  height: 800px;
  top: 0;
  left: 0;

  animation: am2 ease-out 1s;
}



input {
  background-color: transparent;
  outline: none;
  border: none;
  border-bottom: 1px solid #666;
  width: 80%;
  height: 45px;
  color: #eee;
  font-size: 20px;
  margin-left: 34px;
  margin-top: 40px;
}

.texts {
  display: inline-block;
  font-size: 30px;
  margin-left: 34px;
  margin-top: 50px;
}


button {
  border: none;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  color: #eee;
  font-size: 23px;
  /* margin-left: 0px; */
  margin-top: 71px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0px 2px 10px #111;
}

span {
  background: #d1e0ef;
  position: absolute;
  top: 117px;
  left: 143px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  box-shadow: 1px 1px 50px #000;
}

span:nth-child(1) {
  top: 117px;
  left: 143px;
  width: 120px;
  height: 120px;
  background-color: purple;

  animation: am1 ease-in-out 3s infinite alternate;
}

span:nth-child(2) {
  top: 518px;
  left: 434px;
  width: 200px;
  height: 200px;
  background-color: orange;
  animation: am1 ease-in-out 4s infinite alternate-reverse;
}

span:nth-child(3) {
  top: 196px;
  left: 483px;
  width: 60px;
  height: 60px;
  background-color: cyan;
  animation: am1 ease-in-out 2.5s 0.5s infinite alternate;
}

@keyframes am1 {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-30px);
  }
}

@keyframes am2 {
  0% {
    transform: scale(0, 0) rotateZ(60deg);
  }

  100% {
    transform: scale(1, 1) rotateZ(0);
  }
}

.glass:hover {
  box-shadow: inset 1px 1px 3px rgba(255, 255, 255, 0.9), 4px 4px 25px rgba(0, 0, 0, 0);
  backdrop-filter: blur(7px);
}

button:hover {
  width: 160px;
  border-radius: 70px;
  /* margin-left: 105px; */
  box-shadow: 0px 0px 10px #999, inset 0px 0px 5px #333;
}

.btn {
  display: flex;
  justify-content: space-around;
  /* 新增：按钮水平居中对齐，并保持相等的间距 */
}
  
  </style>
  
</head>

<body>

  <div class="container">
  <div class="bg">
    <span></span>
    <span></span>
    <span></span>
  </div>
  <div class="glass">
    <div class="texts">管理员登录</div>
    <form id="loginForm" action="adminLogin">
      <input type="text" placeholder="用户名" id="username" name="username" required>
      <input type="password" placeholder="密码" id="password" name="password" required>
      <div class="btn">
        <button type="submit" id="login">登录</button>
        <button type="button" id="register">注册</button>
      </div>
    </form>
  </div>
</div>

</body>

</html>



<script>
let registerBtn = document.getElementById('register');
registerBtn.addEventListener('click', function() {
    window.location.href = './adminRegister.jsp';
})

</script>